<template>
  <!-- 直播预告 -->
 <div class="live-preview-box">
     <HeadTitle :title="'直播预告'"></HeadTitle>
     <ul  :class="previewList.length>5?'preview-more-box' :'preview-box'" >
       <li v-for="(item ,i) in previewList.slice(0,5)" :key="i" class="preview-item" @click="goToLive(item.roomId)">
         <img :src="item.imagUrl" alt=""/>
         <p>{{item.title | ellipsis(8)}}</p>
         <p>{{item.intro | ellipsis(11)}}</p>
         <LiveStatus :small='true' :status='item.roomStatus'></LiveStatus>
       </li> 
        <li v-if="previewList.length>5" >
          <div class="preview-more" @click="morePreview">
            <i></i>
            <p>直播列表</p>
          </div>
        </li>

     </ul>
 </div>
</template>

<script>
import HeadTitle from './headTitle' //头部标题组件
import LiveStatus from './liveStatus'//直播状态组件
  export default {
     components:{
       HeadTitle,
       LiveStatus,
     },
    props: {
      status : 0,
      previewList:{
        type: Array,
        default:[]  
      }
    },
    data() {
      return {
      };
    },
    computed: {},
    created() {},

    mounted() {},
    methods: {
      morePreview(){
        // 直播日历
        this.$router.push({
		             path: `/${this.$channel}/liveCalendar`,
		         });
      },
      goToLive(roomId) {
             this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
			},
    },
    watch: {
    },
     filters: {
      //标题超过num个显示省略号
      ellipsis: function (value,num) {
        if (!value) return ''
        return value.length > num ? value.substring(0,num)+'...' : value
      } 
      }
  };
</script>
<style scoped="scoped">
 .live-preview-box{
   padding-left: 30px;
  
 }
 .preview-box,.preview-more-box{
   overflow-x: auto;
   display: flex;
   flex-direction: row;
   margin-bottom: 60px;
 }
 
 .preview-item{
   position: relative;
   margin-right: 10px;
 }
 .preview-item .small-live-status-box{
   position: absolute;
   right: -4px;
   top: 6px;
 }
 .preview-item img{
   height: 170px;
   width: 302px;
   margin-bottom: 17px;
   border-radius: 8px;
 }
 .preview-item:last-child img{
  /* margin-right: 20px; */
 }
.preview-item p:first-of-type{
   font-size: 30px;
   font-weight: 400;
   color: #333333;
   line-height: 42px;
   letter-spacing: 1px;
}

  .preview-item p:last-of-type{
    font-size: 24px;
    font-weight: 400;
    color: #ACACAC;
    line-height: 33px;
    letter-spacing: 1px;
   } 

   .preview-more {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding:29px 19px 10px ;
   margin-right: 12px;
   background: #F4F4F4;
   border-radius: 3px;
 }
 .preview-more i{
  height: 27px;
  width: 27px;
  margin-bottom: 10px;
  margin-left: -1px;
  background: url('../../assets/images/zhxyk/home/previre_more.png') no-repeat;
  background-size: 100% 100%;
 }
 .preview-more p{
   font-size: 24px;
   font-weight: 400;
   color: #666666;
   line-height: 40px;
 }

</style>
